<template>
  <div>
    <div class="row">
      <el-form
        :model="uploadForm"
        status-icon
        ref="uploadRef"
        :rules="$rules"
        label-width="140px"
        class="col-1"
      >
        <el-form-item :label="$language.local('SID')" prop="SID">
          <!-- <select-id v-model="uploadForm.SID" ></select-id> -->

          <select-id
            v-model="uploadForm.SID"
            label-key="ServiceName"
            apiName="/api/Common/GetServiceProviderList"
          ></select-id>
        </el-form-item>
        <el-form-item :label="$language.local('MID')" prop="MID">
          <select-merchantid v-model="uploadForm.MID"></select-merchantid>
        </el-form-item>
        <el-form-item
          :label="$language.local('paytype')"
          prop="paytype"
          class="upload"
        >
          <el-radio-group size="mini" v-model="uploadForm.paytype">
            <el-radio-button label="0">常规</el-radio-button>
            <el-radio-button label="1">大额</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="ExcelUrl"
          class="upload-img"
          :label="$language.local('ExcelUrl')"
        >
          <span
            >请先下载此
            <el-button
              type="text"
              @click="downloadFile"
              class=""
              icon="el-icon-download
"
              >批量模板</el-button
            >，并按照模板要求填写表格后上传。

            <!-- <a
              href="http://b.xinyueai.com/admin/static/template/importTemplate.xls"
              download="资金代发"
              target="_blank"
              class="red"
              >批量模板</a
            > -->
          </span>
          <upload-file v-model="uploadForm.ExcelUrl" :drag="true">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击选择</em>
            </div>
            <div class="el-upload__tip" slot="tip">上传文件不超过 5 MB</div>
          </upload-file>
        </el-form-item>
      </el-form>
      <el-card class="invoice-instructions col-1" shadow="never">
        <div class="title">
          <h3><i class="el-icon-info"></i> 填写说明:</h3>
        </div>

        <p class="text item">
          1. 请先下载此
          <el-button
            type="text"
            @click="downloadFile"
            class=""
            icon="el-icon-download
"
            >批量模板</el-button
          >
          <!-- <a
            href="http://b.xinyueai.com/admin/static/template/importTemplate.xls"
            class="red"
            target="_blank"
            >批量模板</a
          > -->
          ，并按照模板要求填写表格。
        </p>
        <p class="text item">
          2.
          点击文件上传区（虚线方框）选择已填写完的模板表格或拖拽文件至文件上传区（虚线方框）内。
        </p>
        <p class="text item">
          3. 点击 <kbd>确定</kbd> 按钮，系统经过初步处理会弹出预览窗口。
        </p>
        <p class="text item">
          4. 请确认预览的代发记录是否准确，点击
          <kbd>审核无误提交银行发放</kbd> 即可完成批量代发。
        </p>
        <p class="text item red">
          注：只能上传已填写好的标准模板文件，数据记录最多不能超过300条，且文件大小不超过5M。
        </p>
        <p class="text item red">如有疑问请联系平台客服人员。</p>
      </el-card>
    </div>

    <div slot="footer" class="form-footer">
      <el-button size="small" @click="$router.go(-1)" icon="el-icon-back"
        >返回
      </el-button>
      <el-button
        size="small"
        type="primary"
        @click="uploadFiles('uploadRef')"
        icon="el-icon-check"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
// import PayDetail from "../public/Detail.vue";
export default {
  components: {
    // "pay-detail": PayDetail,
  },
  data() {
    return {
      uploadForm: {
        ExcelUrl: null,
        SID: null,
        paytype: "0",
        MID: null,
      },
    };
  },
  methods: {
    uploadFiles(formName) {
      console.log(this.$refs[formName]);
      console.log(this.uploadForm);
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }

        console.log(this.uploadForm);
        let response = await this.$http.post(
          "/api/transaction/BatchData",
          null,
          this.uploadForm
        );
        console.log(response);
        const item = response.data.Data[0];
        console.log(item);
        if (item) {
          this.$router.push({
            path: "/review-details",
            query: {
              api: "/api/transaction/GetModel/",
              id: item.TBID,
            },
          });
        } else {
          this.$router.go(-1);
        }
      });
    },
    async downloadFile() {
      console.log(123);
      // const result = await this.$download.file({
      //   url: "http://b.xinyueai.com/static/login/images/sales.cb30bbe9.png",
      // });
      // const result = await fetch(
      //   "http://b.xinyueai.com/static/login/images/sales.cb30bbe9.png",
      //   {
      //     mode: "cors",
      //     responseType: "blob",
      //   }
      // );

      // console.log(result);
      this.$common.downloadFile({
        url: "http://b.xinyueai.com/admin/static/template/importTemplate.xls",
        fileName: "批量代发模板.xls",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.upload {
  width: 100%;
}
.row {
  align-items: flex-start;
}
</style>
